<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset='utf-8' />
    <title>妙可蓝多央视少儿作品征集</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link href="css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div class="pop-bg">
        <div class="pop-box" id="signIn">
            <img class="pop-signin-title" src="images/pop_signin_title.png" width="100%" alt="" />
            <img class="sign-in-img" src="images/sign_in_img.png" alt="" />
            <div class="pop-btns-box flex">
                <div class="pop-offline-btn"></div>
                <div class="pop-online-btn"></div>
            </div>
        </div>

        <div class="pop-box canvass" id="canvass">
            <h1>邀请好友来为我投票吧</h1>
            <div class="canvass-choose-box flex">
                <div class="canvass-choose-item" id="wechat">
                    <img src="images/wechat_icon.png" alt="" />
                    <p>微信好友</p>
                </div>
                <div class="canvass-choose-item" id="pyq">
                    <img src="images/pyq_icon.png" alt="" />
                    <p>朋友圈</p>
                </div>
                <div class="canvass-choose-item" id="poster">
                    <img src="images/poster_icon.png" alt="" />
                    <p>生成海报</p>
                </div>
            </div>
            <div class="canvass-close-box">取消</div>
        </div>
    </div>

    <div class="pop-vague-bg">
        <div class="pop-share-box" id="share">
            <img class="share-arrow-img" src="images/share_arrow_img.png" alt="" />
            <div class="pop-share-content flex">
                <img src="images/rank_img_demo1.jpg" alt="" />
                <div class="pop-share-info">
                    <p>0001号作品</p>
                    <p>唱歌唱歌来唱歌</p>
                    <p>瓦西里小朋友</p>
                </div>
                <div class="pop-share-vote"></div>
            </div>
        </div>

        <div class="pop-poster-box" id="posterShow">
            <img class="pop-poster-qr" src="images/qr_demo.png" alt="" />
            <div class="pop-poster-info">
                <div class="pop-poster-info-img"><img src="images/rank_img_demo1.jpg" alt="" /></div>
                <div class="pop-poster-info-content">
                    <p>0001号作品</p>
                    <p>唱歌唱歌来唱歌</p>
                    <p>瓦西里小朋友</p>
                </div>
            </div>
            <div class="pop-poster-tips flex">
                <p>长按海报图片保存至手机</p>
                <img src="images/download_icon.png" alt="" />
            </div>
        </div>
    </div>

    <div class="page">
        <div class="server-box flex">
            <img src="images/server_icon.png" alt="" />
            <p>客服</p>
        </div>
        <a href="index.html" class="index-act-box flex">
            <img src="images/home.png" alt="" />
            <p>首页</p>
        </a>
        <div class="banner-box">
            <img src="images/banner.jpg" width="100%" alt="" />
        </div>
        <div class="detail-head-box flex">
            <div class="detail-head-item">
                <h1>20</h1>
                <div class="detail-head-item-info">当前排名</div>
            </div>
            <div class="detail-head-item">
                <h1>999</h1>
                <div class="detail-head-item-info">当前票数</div>
            </div>
            <div class="detail-head-item">
                <h1>徐州</h1>
                <div class="detail-head-item-info">参赛地区</div>
            </div>
        </div>
        <div class="box" style="margin-top: -.4rem;">
            <div class="detail-box-title">作品编号：#0001</div>
            <div class="detail-product-show-box flex">
                <img src="images/product_img_demo.jpg" alt="" />
                <video src=""></video>
            </div>
            <div class="detail-box-content">
                <h1>才艺介绍</h1>
                <p>音乐画者，舞台梦者，文字编织者。独特才艺，传递灵魂的旋律。</p>
                <h1>选手介绍</h1>
                <p>音律操纵者，舞台新星，艺术之魂，创意独具。</p>
            </div>
            <div class="detail-btns-box flex">
                <div class="detail-canvass-btn"></div>
                <div class="detail-vote-btn"></div>
            </div>
        </div>
        <div class="sign-in-btn"><img src="images/sign_in_btn.png" width="100%" alt="" /></div>
        <div class="three-btns-box flex">
            <a href="#"><img src="images/intro_btn_img.png" width="100%" alt=""></a>
            <a href="#"><img src="images/vote_btn_img.png" width="100%" alt=""></a>
            <a href="#"><img src="images/rank_btn_img.png" width="100%" alt=""></a>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
    <script type="text/javascript">
        $(function (e) {
            $('#poster').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#canvass').removeClass('show');

                $('.pop-vague-bg').addClass('show');
                $('#posterShow').show();
            })

            $('#pyq').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#canvass').removeClass('show');

                $('.pop-vague-bg').addClass('show');
                $('#share').show();
            })

            $('#wechat').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#canvass').removeClass('show');

                $('.pop-vague-bg').addClass('show');
                $('#share').show();
            })

            $('.canvass-close-box').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#canvass').removeClass('show');
            })

            $('.detail-canvass-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                setTimeout(function () {
                    $('#canvass').addClass('show');
                },100);
            })

            $('.pop-offline-btn').click(function (e) {
                window.location.href = 'address.html';
            })

            $('.pop-online-btn').click(function (e) {

            })

            $('.sign-in-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#signIn').show();
            })
        })
    </script>

</body>
</html>